<template>
  <header class="header-wrapper items-center">
    <i v-if="isShowBack" class="nbicon nbfanhui" @click="goBack"/>
    <div class="header-title">{{ title }}</div>
    <slot name="right"/>
  </header>
  <div class="header-block"/>
</template>
<script setup lang="ts">
import {withDefaults} from 'vue';
import {useRouter} from "vue-router";

defineOptions({
  name: 'MHeader'
})

interface IProps {
  title: string,
  isShowBack?: boolean
  backUrl?: string
  isShowMore?: boolean
}

const props = withDefaults(defineProps<IProps>(), {
  isShowBack: true,
  backUrl: '',
  isShowMore: false,
});
const router = useRouter();

const goBack = () => {
  if (props.backUrl) {
    router.push(props.backUrl);
  } else {
    router.back();
  }
}
</script>


<style scoped lang="less">
@import "@/assets/styles/mixin";

.header-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  .fj();
  .wh(100%, 44px);
  line-height: 44px;
  padding: 0 10px;
  .boxSizing();
  color: #252525;
  background: #ffffff;
  border-bottom: 1px solid #dcdcdc;

  .header-title {
    flex: 1;
    text-align: center;
    font-size: 14px;
  }
}

.header-block {
  height: 44px;
}
</style>